<html>

<head>
    <title>pViz cuslivingstone display example</title>
    <script src="https://cnstatic01.e.vhall.com/3rdlibs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript"
        src="https://cnstatic01.e.vhall.com/demand-upload-jssdk/dist/3.0.7/vhallDemandSDK.js"></script>
    <style type="text/css" media="screen" class="example">
        .container {
            display: flex;
            align-items: ccenter;
            font-size: 14px;

        }

        .upload-button {
            width: 86px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            background: #357fca;
            border-radius: 4px;
            color: white;
            cursor: pointer;
            font-size: 14px;
        }

        input {
            display: none;
        }
    </style>
</head>

<body class="container">
    <label class="upload-button" for="upload"> 上传视频 </label>
    <input class="upload-input" type="file" id="upload" />

    <script class="example">
        window.addEventListener("message", function (event) {
            var data = event.data;
            // 然后就可以获得vue传过来的数据
            // console.log("从vue中获得的数据", data);

            vhallDemandSDK('#upload', {
                params: {
                    demandType: data.demandType || 2,
                    app_key: data.app_key ,
                    token: data.token 
                },
                ready: function (res) {
                    /**
                     * 初始化完成的回调函数
                     **/
                    // console.log('初始化完成', res)
                },
                beforeUpload: function (file) {
                    // console.log('准备中' ,file)
                    /**
                    * 准备中...（文件进行MD5转换过程）
                    **/
                    $('.upload-button').css('display', 'none');
                    window.parent.postMessage({ status: 'ready' }, '*')

                },
                progress: function (percent, file) {
                    // console.log(percent)
                    // console.log(file)
                    /**
                     * 上传中...'
                     * 'percent 上传进度百分比'
                     * 'file 上传文档具体信息
                     **/
                    // $('.upload-button').css('display', 'none');
                    // $(".progress-txt").text('上传中...，进度：' + percent);
                    // $('.progress').css('width', percent);
                    window.parent.postMessage({ percent, status: 'progress' }, '*')
                },
                uploadSuccess: function (res) {
                    // console.log('上传成功', res)
                    /**
                     * 上传成功!'
                     * 'res 成功返回活动ID webinar_id
                     **/

                    $('.upload-button').css('display', 'block');
                    window.parent.postMessage({ status: 'success' }, '*')

                },
                error: function (msg, file, e) {
                    /**
                     * 上传出错'
                     * 'msg 错误返回的状态码信息'
                     **/
                    // console.log('上传出错', msg)
                    $('.upload-button').css('display', 'block');
                    window.parent.postMessage({ status: 'error', msg }, '*')


                }
            })
        }, '*')
    </script>
</body>

<script>

</script>

</html>